<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: #4c96fa;
        }
        .general{
            float: left;
        }
        .damao{
            width: 300px;
            height: 200px;
            background-color: yellowgreen;
        }
        .ermao{
            width: 200px;
            height: 200px;
            background-color: salmon;
        }
        .footer{
            height: 200px;
            background-color: black;
        }
        .clear{
            clear: both;
        }
    /*    双伪元素*/
        .box3:before,.box3:after{
            content: "";
            display: table;
        }
        .box3:after{
            clear: both;
        }
        /*IE6、7*/
        .box3{
            zoom: 1;
        }
    </style>
</head>
<body>
    -------------float标签：使标签变为行内块元素
    <br/>
    -------------如果前后有行、行内块元素，则和float属性元素共享一行，而且不会占用float属性元素的标准流。如下面的0和float & 1和float元素-------------
    <div style="width:300px;height:100px;background-color: green">0</div>
    <div style="width: 200px;height: 200px;float: left;background-color: salmon">float</div>
    <div style="width:300px;height:100px;display:inline-block;background-color: #805b75">1</div>
    <br/>
    -------------如果前面有块元素，则块元素独占一行，第二行渲染float属性元素；如果后面有‘块元素’，则会被其占领脱标元素的标准流，结果就显示为脱标元素覆盖了后面的块标签，但是不会覆盖字符。如下面的2和float & float和3元素，这也是编辑器环绕的实现方式-------------
    <div style="width: 300px;height: 300px;background-color: #dbaa70">2</div>
    <div style="width: 200px;height: 200px;float: left;background-color: salmon">float</div>
    <div style="width: 300px;height: 300px;background-color: palevioletred">3</div>
    -------------被覆盖的块元素字符会先横向环绕，如果块元素宽度不满足再往下环绕。比如float：left的话，会把字符放到浮动标签的右边，如果被遮挡的标签宽度小于等于浮动标签的宽度，那么字符会被放到浮动标签的下面，如下展示的4------------
    _____________________________2宽度不及4___________________________
    <br/>
    <div style="width:300px;height:100px;background-color: green">1</div>
    <div style="width: 300px;height: 200px;float: left;background-color: salmon">2</div>
    <span style="background-color: palevioletred">3</span>
    <div style="width: 500px;height: 300px;background-color: palevioletred">4</div>
    _____________________________4宽度不及2___________________________
    <br/>
    <div style="width: 300px;height: 200px;float: left;background-color: salmon">2</div>
    <span style="background-color: palevioletred">3</span>
    <div style="width: 200px;height: 200px;background-color: palevioletred">4</div>
    -------------浮动清除---------------------------------------------------------------
    <ul style="text-decoration-line: none">
        <li>隔墙法（w3school推荐,兼容性强,结构化差）</li>
        <li>父级添加overflow，简单语义差</li>
        <li>父级添加双伪元素，结构语义明确，兼容性差</li>
    </ul>
    隔墙法，隔离的盒子必须是块元素
    <div class="box">
        <div class="general damao">damao</div>
        <div class="general ermao">ermao</div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
    父级添加overflow
    <div class="box2" style="overflow: hidden;background-color: antiquewhite">
        <div class="general damao">damao</div>
        <div class="general ermao">ermao</div>
    </div>
    <div class="footer"></div>
    双伪元素
    <div class="box3">
        <div class="general damao">damao</div>
        <div class="general ermao">ermao</div>
    </div>
    <div class="footer"></div>
</body>
</html>
